<template>
    <div class="withdraw_deposit">
        <div class="ls-card">
            <!-- 提示 -->
            <el-alert title="温馨提示：设置钱包转账手续费。" type="info" :closable="false" show-icon />
        </div>
        <el-form ref="formRef" :model="form" :rules="formRules" label-width="120px" size="small">
            <!-- 店铺信息 -->
            <div class="ls-card m-t-16">
                <!--                <div class="card-title">提现设置</div>-->
                <div class="card-content m-t-24">
                    <!--                    <el-form-item label="提现方法" prop="withdraw_way">-->
                    <!--                        &lt;!&ndash; 多选框 &ndash;&gt;-->
                    <!--                        <el-checkbox-group v-model="form.withdraw_way">-->
                    <!--                            <el-checkbox label="1">账户余额</el-checkbox>-->
                    <!--                        </el-checkbox-group>-->
                    <!--                    </el-form-item>-->
                    <el-form-item label="转账手续费">
                        <el-radio-group v-model="form.transfer_ratio_type">
                            <el-radio :label="1">内扣</el-radio>
                            <el-radio :label="2">外扣</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="转账手续费">
                        <el-input class="ls-input" placeholder="请输入转账手续费" v-model="form.transfer_ratio">
                            <template slot="append">%</template>
                        </el-input>
                        <div class="muted xs">会员转账时收取的手续费占比。</div>
                    </el-form-item>
                </div>
            </div>
        </el-form>
        <!--  表单功能键  -->
        <div class="bg-white ls-fixed-footer">
            <div class="row-center flex" style="height: 100%">
                <!-- <el-button size="small" @click="$router.go(-1)">取消</el-button> -->
                <el-button size="small" type="primary" @click="setTransferConfig()">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
import { apiTransferConfig, apiSetTransferConfig } from '@/api/setting/user'
@Component({
    components: {}
})
export default class WithdrawDeposit extends Vue {
    /** S Data **/
    form = {
        // withdraw_way: [], // 提现方式：1-钱包余额；2-微信零钱；3-银行卡；4-微信收款码；5-支付宝收款码
        // withdraw_min_money: 0, // 最低提现金额
        // withdraw_max_money: 0, // 最高提现金额
        transfer_ratio: 0, // 提现手续费
        transfer_ratio_type: 2
        // scene: 'withdraw', // 场景：user-用户设置；register-注册设置；withdraw-提现设置
        // transfer_way: 1 // 微信零钱接口:1-企业付款到零钱;2-商家转账到零钱
    }
    // 预校验
    formRules = {
        transfer_ratio: [
            {
                type: 'integer',
                required: true,
                message: '请输入转账手续费',
                trigger: 'change'
            }
        ]
    }
    $refs!: { formRef: any }
    /** E Data **/

    // 获取用户提现设置
    getTransfer() {
        apiTransferConfig()
            .then((res: any) => {
                // this.$message.success('数据请求成功!')
                this.form = res
            })
            .catch(() => {
                // this.$message.error('数据请求失败!')
            })
    }

    // 修改用户提现设置
    setTransferConfig() {
        this.$refs.formRef.validate((valid: any) => {
            // 预校验
            if (!valid) {
                return
            }
            apiSetTransferConfig(this.form)
                .then((res: any) => {
                    setTimeout(() => {
                        this.getTransfer()
                    }, 50)
                })
                .catch(() => {
                    // this.$message.error('保存失败!')
                })
        })
    }
    /** S Life Cycle **/
    created() {
        this.getTransfer()
    }
    /** E Life Cycle **/
}
</script>

<style scoped lang="scss">
.ls-card {
    .ls-input {
        width: 240px;
    }

    .card-title {
        font-size: 14px;
        font-weight: 500;
    }

    .login_limit-unit {
        display: inline-block;
        width: 2em;
        text-align: center;
    }
}

.el-input {
    width: 240px;
}

.withdraw_deposit {
    min-height: calc(100vh - #{$--header-height} - 92px);
    margin-bottom: 60px;
}
</style>
